<!--
 * @Author: chengxinwei 499449221@qq.com
 * @Date: 2024-10-09 17:06:41
 * @LastEditors: chengxinwei 499449221@qq.com
 * @LastEditTime: 2024-10-10 11:09:23
 * @FilePath: /web/src/components/lineChart/index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
	<div>
		<div class="ku">
			<img src="../../assets/images/u322.svg" alt="">
			<div class="text">
				<div class="text-num">
					第
					<span class="day">790</span>
					天
				</div>
				<div class="shu">
					<div class="more">
						<img src="../../assets/images/u358.svg" alt="">
						<img src="../../assets/images/u358.svg" alt="">
						<img src="../../assets/images/u358.svg" alt="">
						钢拱架
					</div>
					<div class="column">1220</div>
				</div>
				<div class="shu">
					<div class="more">
						<img src="../../assets/images/u358.svg" alt="">
						<img src="../../assets/images/u358.svg" alt="">
						<img src="../../assets/images/u358.svg" alt="">
						网片
					</div>
					<div class="column">1220</div>
				</div>
				<div class="shu" style="margin-left: 8%;">
					<div class="more">
						<img src="../../assets/images/u358.svg" alt="">
						<img src="../../assets/images/u358.svg" alt="">
						<img src="../../assets/images/u358.svg" alt="">
						小导管
					</div>
					<div class="column">1220</div>
				</div>
				<div class="shu" style="margin-left: 8%;">
					<div class="more">
						<img src="../../assets/images/u358.svg" alt="">
						<img src="../../assets/images/u358.svg" alt="">
						<img src="../../assets/images/u358.svg" alt="">
						连接钢板
					</div>
					<div class="column">1220</div>
				</div>
			</div>
		</div>
		<el-row>
			<el-col :span="8">
				<div class="mid">
					<div class="plan">
						<div class="title">
							<img src="../../assets/images/u39.svg" alt="">
							<div class="statistics">计划统计</div>
						</div>
						<div class="right"><span class="yellow">已生产</span>/计划任务</div>
						<div class="progress">
							<div style="position: relative;">
								<div class="left"></div>
								<div class="right1"></div>
								<div class="text">
									钢拱架产线
								</div>
								<div class="blue"></div>
								<div class="blue1"></div>
								<div class="middle">
									<div class="line" v-for="(index) in 20" :key="index">
									</div>
								</div>
								<div class="total">
									<span class="yellow">700</span>/1000
								</div>
							</div>
						</div>
						<div class="progress">
							<div style="position: relative;">
								<div class="left"></div>
								<div class="right1"></div>
								<div class="text" style="color: #00FFFF;">
									网片产线
								</div>
								<div class="blue"></div>
								<div class="blue1"></div>
								<div class="middle">
									<div class="line" v-for="(index) in 20" :key="index">
									</div>
								</div>
								<div class="total">
									<span class="yellow">700</span>/1000
								</div>
							</div>
						</div>
						<div class="progress">
							<div style="position: relative;">
								<div class="left"></div>
								<div class="right1"></div>
								<div class="text" style="color: #70B603;">
									小导管产线
								</div>
								<div class="blue"></div>
								<div class="blue1"></div>
								<div class="middle">
									<div class="line" v-for="(index) in 20" :key="index">
									</div>
								</div>
								<div class="total">
									<span class="yellow">700</span>/1000
								</div>
							</div>
						</div>
						<div class="progress" style="margin-bottom: 20px;">
							<div style="position: relative;">
								<div class="left"></div>
								<div class="right1"></div>
								<div class="text" style="color: #70B603;">
									连接钢板产线
								</div>
								<div class="blue"></div>
								<div class="blue1"></div>
								<div class="middle">
									<div class="line" v-for="(index) in 20" :key="index">
									</div>
								</div>
								<div class="total">
									<span class="yellow">700</span>/1000
								</div>
							</div>
						</div>
					</div>
				</div>
				<div class="waring">
					<div class="redline"> ！钢拱架产线冷弯机故障，请尽快处理。</div>
					<div class="yellowline"> ！钢拱架产线请维护焊接机器人。</div>
					<div class="redline"> ！钢拱架产线冷弯机故障，请尽快处理。</div>
					<div class="yellowline"> ！钢拱架产线请维护焊接机器人。</div>
					<div class="redline"> ！钢拱架产线冷弯机故障，请尽快处理。</div>
					<div class="yellowline"> ！钢拱架产线请维护焊接机器人。</div>
				</div>
				<div class="record">
					<div class="top">
						<div class="left"><img src="../../assets/images/kuohao.png" alt=""></div>
						<div class="right"><img src="../../assets/images/u193.svg" alt=""></div>
						<div class="text">设备运维记录</div>
					</div>
					<pie-chart :chartData="chartData"></pie-chart>
				</div>
			</el-col>
			<el-col :span="10">
				<div class="mid" style="margin-left: 0;">
					<div class="plan" style="width: 98%;">
						<div class="title">
							<img src="../../assets/images/u39.svg" alt="">
							<div class="statistics">产量走势</div>
						</div>
						<lineChart :lineChart="lineChart"></lineChart>
					</div>
				</div>
				<div class="record" style="margin-left: -2%; width: 150%;">
					<div class="top">
						<div class="left"><img src="../../assets/images/kuohao.png" alt=""></div>
						<div class="right" style="width: 75%;"><img src="../../assets/images/u193.svg" alt=""></div>
						<div class="text">钢拱架厂介绍</div>
					</div>
					<div class="box">
						<div class="introduce">
							深圳外环钢拱架厂，是一家集设计、生产、销售与安装于一体的专业化企业。我们专注于高品质钢拱架的研发与制造，产品广泛应用于桥梁建设、隧道工程、大型场馆及工业厂房等领域。采用先进工艺与优质钢材，确保每一根拱架都承载可靠、结构稳固。凭借卓越的技术实力与丰富的项目经验，我们为客户提供一站式解决方案，从定制设计到现场安装，全程把控质量，确保项目顺利进行。钢拱架厂，以匠心筑造安全，
						</div>
						<el-carousel :interval="5000" arrow="always" indicator-position="none" style="width: 60%;margin-left: 10%;">
							<el-carousel-item>
								<div class="right" style="margin: 0 auto;">
									<div><img src="../../assets/images/1.png" alt=""></div>
									<div><img src="../../assets/images/2.png" alt=""></div>
									<div><img src="../../assets/images/3.png" alt=""></div>
									<div><img src="../../assets/images/4.png" alt=""></div>
								</div>
							</el-carousel-item>
							<el-carousel-item>
								<div class="right" style="margin: 0 auto;">
									<div><img src="../../assets/images/1.png" alt=""></div>
									<div><img src="../../assets/images/2.png" alt=""></div>
									<div><img src="../../assets/images/3.png" alt=""></div>
									<div><img src="../../assets/images/4.png" alt=""></div>
								</div>
							</el-carousel-item>
						</el-carousel>

					</div>
				</div>
			</el-col>
			<el-col :span="6">
				<div class="record" style="margin-top: -120px;margin-left: 2%;">
					<div class="top">
						<div class="left"><img src="../../assets/images/kuohao.png" alt=""></div>
						<div class="right" style="width: 67%;"><img src="../../assets/images/u193.svg" alt=""></div>
						<div class="text">产线运行情况</div>
					</div>
					<div class="production">
						<div style="display: flex;justify-content: flex-start;">
							<div style="width: 50%;">
								<div class="yuan">
									<div style="position: absolute;left: -80px;">
										<div class="text">钢拱架产线</div>
										<div class="status">运行中</div>
									</div>
									<div class="nei"></div>
									<div class="nei1"></div>
									<div class="nei2"></div>
									<div class="nei3"></div>
									<div class="nei4">急停</div>
								</div>
							</div>
							<div style="width: 50%;">

								<div class="yuan">
									<div style="position: absolute;left: -80px;">
										<div class="text">小导管产线</div>
										<div class="status">运行中</div>
									</div>
									<div class="nei"></div>
									<div class="nei1"></div>
									<div class="nei2"></div>
									<div class="nei3"></div>
									<div class="nei4">急停</div>
								</div>
							</div>
						</div>
						<div style="display: flex;justify-content: flex-start;">
							<div style="width: 50%;">
								<div class="yuan">
									<div style="position: absolute;left: -80px;">
										<div class="text">网片产线</div>
										<div class="status">运行中</div>
									</div>
									<div class="nei"></div>
									<div class="nei1"></div>
									<div class="nei2"></div>
									<div class="nei3"></div>
									<div class="nei4">急停</div>
									<div class="nei"></div>
									<div class="nei1"></div>
									<div class="nei2"></div>
									<div class="nei3"></div>
									<div class="nei4">急停</div>
								</div>
							</div>
							<div style="width: 50%;">
								<div class="yuan">
									<div style="position: absolute;left: -80px;">
										<div class="text">连接钢板产线</div>
										<div class="status">运行中</div>
									</div>
									<div class="nei"></div>
									<div class="nei1"></div>
									<div class="nei2"></div>
									<div class="nei3"></div>
									<div class="nei4">急停</div>
									<div class="nei"></div>
									<div class="nei1"></div>
									<div class="nei2"></div>
									<div class="nei3"></div>
									<div class="nei4">急停</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</el-col>
		</el-row>
	</div>
</template>

<script>
import pieChart from '../../components/pieChart/index.vue'
import lineChart from '../../components/lineChart/index.vue'
export default {
	components:{
		pieChart,
		lineChart
	},
	data(){
		return{
			chartData: [{
				name: '钢拱架产线',
				value: 8
			},
			{
				name: '小导管产线',
				value: 8
			},
			{
				name: '网片产线',
				value: 8
			},
			{
				name: '连接钢板产线',
				value: 8
			}
			],
			lineChart: {
				title: '',
				categories: ['2024/8/23', '2024/8/24', '2024/8/25', '2024/8/26', '2024/8/27', '2024/8/28', '2024/8/29'],
				values1: [820, 932, 901, 934, 1290, 1330, 1320],
				values2: [420, 755, 396, 285, 1358, 1540, 320],
				values3: [564, 323, 201, 434, 1490, 1230, 877],
				values4: [874, 234, 342, 924, 1345, 1211, 750]
			}
		}
	},
	mounted() {
		this.initLineChart();
	},
};
</script>
<style lang="scss">
.ku {
	position: relative;
	margin-left: 4%;
	width: 70%;

	img {
		width: 100%;
		height: 120px;
	}

	.text {
		position: absolute;
		color: white;
		top: 30px;
		left: 20px;
		font-weight: 700;
		font-style: normal;
		font-size: 20px;
		margin-left: 50px;
		display: flex;
		width: 100%;

	}

	.day {
		margin: 0 70px;
		font-size: 36px;
		color: #FF9900;
	}

	.shu {
		margin-left: 20%;

		.more {
			display: flex;

			img {
				width: 10px;
				height: 22px;
				margin-top: 5px;
			}
		}
	}

	.column {
		font-weight: 700;
		font-style: normal;
		font-size: 28px;
		color: #2DE9DB;
		margin-top: 10px;

	}
}

.mid {
	margin-left: 11%;
	margin-top: 20px;

	.plan {
		width: 90%;
		border: 1px solid rgba(2, 231, 243, 1);
		position: relative;

		.right {
			color: white;
			position: absolute;
			top: 10px;
			right: 10px;
			font-weight: bold;

			.yellow {
				color: #fccd1d;
			}
		}
	}

	.title {
		position: relative;

		.statistics {
			top: 6px;
			left: 10px;
			font-weight: 700;
			font-style: normal;
			font-size: 18px;
			color: #01F7FD;
			position: absolute;
		}
	}

	.progress {
		margin-left: 20px;
		margin-top: 20px;
		position: relative;
		height: 50px;

		.left {
			background-color: rgba(252, 205, 29, .3);
			border-top-left-radius: 3px;
			border-bottom-left-radius: 3px;
			width: 100px;
			height: 50px;
			position: absolute;
			left: 0;
			top: 0;
		}

		.right1 {
			border-top: 50px solid rgba(252, 205, 29, .3);
			/* 梯形的高度 */
			border-right: 25px solid transparent;
			/* 右边斜面的宽度 */
			height: 0;
			width: 40px;
			/* 梯形的宽度 */
			position: absolute;
			left: 100px;
			top: 0px;
		}

		.blue {
			border-bottom: 40px solid rgba(1, 247, 253, .5);
			/* 梯形的高度 */
			border-left: 20px solid transparent;
			/* 右边斜面的宽度 */
			height: 0;
			width: 40px;
			/* 梯形的宽度 */
			position: absolute;
			left: 121px;
			top: 4px;
		}

		.blue1 {
			background-color: rgba(1, 247, 253, .5);
			border-top-right-radius: 3px;
			border-bottom-right-radius: 3px;
			width: 70%;
			height: 40px;
			position: absolute;
			left: 161px;
			top: 4px;
		}

		.text {
			position: absolute;
			top: 10px;
			left: 10px;
			font-family: 'Arial Negreta', 'Arial Normal', 'Arial', sans-serif;
			font-weight: 700;
			font-style: normal;
			font-size: 20px;
			color: #FCCD1D;
		}

		.middle {
			display: flex;
			position: absolute;
			left: 160px;
			top: 15px;
		}

		.line {
			height: 20px;
			width: 5px;
			border-radius: 3px;
			background: white;
			margin-right: 8px;
		}

		.yellow {
			color: #FCCD1D;
		}

		.total {
			position: absolute;
			right: 10%;
			top: 13px;
			font-size: 18px;
			color: white;
			font-weight: bold;
		}
	}
}

.waring {
	width: 82%;
	height: 220px;
	margin-left: 11%;
	margin-top: 20px;
	overflow: hidden;
	overflow-y: scroll;

	.redline {
		width: 98%;
		background: rgb(144, 65, 73);
		color: white;
		border-radius: 5px;
		height: 32px;
		line-height: 32px;
		margin-top: 10px;
		display: flex;
		align-content: center;
		font-size: 16px;
		font-weight: bold;
		padding-left: 10px;
	}

	.yellowline {
		width: 98%;
		background: rgb(179, 115, 34);
		color: white;
		border-radius: 5px;
		height: 32px;
		line-height: 32px;
		margin-top: 10px;
		display: flex;
		align-content: center;
		font-size: 16px;
		font-weight: bold;
		padding-left: 10px;
	}
}

.record {
	margin-left: 9%;
	width: 90%;
	margin-top: 20px;

	.top {
		display: flex;
		position: relative;

		.left {
			img {
				width: 30px;
				height: 40px;
			}
		}

		.right {
			img {
				margin-top: 5px;
				width: 134%;
				height: 30px;
			}
		}

		.text {
			position: absolute;
			left: 30px;
			top: 8px;
			font-family: 'Arial Negreta', 'Arial Normal', 'Arial', sans-serif;
			font-weight: 700;
			font-style: normal;
			font-size: 18px;
			color: #00FFFF;
		}
	}
}

.box {
	width: 100%;
	margin-top: 20px;
	border: 1px solid rgba(2, 231, 243, 1);
	margin-left: 2%;
	padding: 20px;
	display: flex;

	.introduce {
		width: 30%;
		font-size: 18px;
		color: #02A7F0;
		border: 1px solid #fff;
		padding: 10px;
	}

	.right {
		width: 500px;
		display: flex;
		justify-content: flex-start;
		flex-wrap: wrap;

		div {
			width: 250px;

			img {
				width: 248px;
				height: 140px;
			}
		}
	}
}

.production {
	.yuan {
		position: relative;
		width: 142px;
		height: 142px;
		background: url("../../assets/images/u416.svg");
		margin: 40px 0 40px 100px;

		.text {
			color: #01F7FD;
			font-size: 16px;

		}

		.status {
			color: #70B603;
			font-size: 14px;
		}

		.nei {
			position: absolute;
			top: 4px;
			left: 4px;
			width: 134px;
			height: 134px;
			background-color: rgb(68, 83, 115);
			border-radius: 50%;
			z-index: 9;
		}

		.nei1 {
			background: url("../../assets/images/u427.svg") no-repeat;
			position: absolute;
			top: 11px;
			left: 11px;
			width: 120px;
			height: 120px;
			z-index: 12;
		}

		.nei2 {
			position: absolute;
			top: 15px;
			left: 15px;
			width: 110px;
			height: 110px;
			background-color: rgb(33, 59, 111);
			border-radius: 50%;
			z-index: 10;
		}

		.nei3 {
			position: absolute;
			top: 34px;
			left: 34px;
			width: 80px;
			height: 80px;
			background: url("../../assets/images/u428.svg") no-repeat;
			z-index: 12;
		}

		.nei4 {
			position: absolute;
			top: 42px;
			left: 42px;
			width: 60px;
			height: 60px;
			border-radius: 50%;
			background: red;
			color: white;
			font-size: 18px;
			line-height: 60px;
			text-align: center;
			z-index: 12;
		}
	}
}
</style>